<style lang="less">
@import './main.less';
.ivu-date-picker-cells-cell-selected,.ivu-date-picker-cells-cell-focused {
    color: #fff !important;
    em {
        color: #fff !important;
    }
}
.data {
    margin-top: -1px;
    font-size: 18px;
    margin-left: 10px;
    margin-right: 10px;
    .ivu-date-picker-rel {
        top: 36%;
    }
    .ivu-date-picker-cells-cell-selected em,
    .ivu-date-picker-cells-cell-selected:hover em {
        background: #2d8cf0;
        color: #fff;
    }
    .ivu-date-picker-cells-cell.ivu-date-picker-cells-cell-selected.ivu-date-picker-cells-cell-focused em {
        color: white;
    }
    .ivu-date-picker-header-label {
        font-size: 0.0625rem;
        font-weight: 100;
        color: #000000b8;
    }
    //.ivu-date-picker-cells-cell em {
    //  font-size: 0.0625rem;
    //  font-weight: 100;
    //  color: #fff;
    //}
    .ivu-date-picker-cells-cell em {
        font-size: 0.0625rem;
        font-weight: 100;
        color: #000000b8;
    }
}
.w_220p {
    width: 220px;
}
</style>
<style scoped>
.body_top_min {
    left: 10px;
    top: 60px;
}
.body_top_man {
    left: 230px;
    top: 60px;
}

.body_top_man1 {
    left: 230px;
    top: 5px;
}
.left_width {
    width: 220px;
}
.menu_left_max {
    padding-left: 220px;
}
.menu_left_min {
    padding-left: 0px;
}
::v-deep .ivu-menu-item {
    padding-left: 43px !important;
    font-size: 14px !important;
}
</style>

<template>
    <div class="main" :class="{ 'main-hide-text': shrink }">
        <!-- 左侧菜单 -->
        <div
            v-show="$store.state.user.isFullScreen"
            :class="`sidebar-menu-content`"
            style="overflow: hidden;display: flex;flex-direction: column;"
            class="overflow-auto-hidden left_width"
            v-if="!shrink"
        >
            <div slot="top" class="logo-content logo">
                <!-- <img src="../assets/images/img_4.png" /> -->
                <!--<img src="../assets/images/byqxlogo.png" />-->
                <img src="@/assets/images/logo.png" alt="logo" />
            </div>
            <!--      <div class="UserImg">-->
            <!--        <div class="UserImgContainer">-->
            <!--          <img :src="$store.state.user.avatar || '../assets/images/userimg.png'" alt/>-->
            <!--          &lt;!&ndash;<p class="blockname">{{$store.state.user.departmentTitle}}</p>&ndash;&gt;-->
            <!--          <p class="blockname1">{{ $store.state.user.nickname }}</p>-->
            <!--        </div>-->
            <!--      </div>-->
            <shrinkable-menu class="overflow-auto-hidden" :shrink="shrink" @on-change="handleSubmenuChange" :before-push="beforePush" :menu-list="menuList" theme="darkblue"></shrinkable-menu>
        </div>
        <!-- 右上顶部导航条 -->
        <div  v-show="$store.state.user.isFullScreen && showHead" :class="!shrink ? `main-header-content fix-nav-${fixNav} menu_left_max` : `main-header-content fix-nav-${fixNav} menu_left_min `">
            <div :class="`main-header header-theme-${navTheme}`">
                <div class="header-left">
                    <!-- 固定图标 -->
                    <div v-if="fixNav && showLogo" :style="{ width: menuWidth + 'px' }" class="fix-logo">
                        <img src="../assets/logo-white.png" v-if="navTheme == 'light'" />
                        <img src="../assets/logo-white.png" key="max-logo" v-else />
                    </div>
                    <!-- 收缩图标 -->
                    <div class="header-navicon-content header-action" @click="toggleClick" style="display: flex; align-content: center">
                        <Icon custom="iconfont icon-menu-unfold" size="20" v-show="this.shrink" style="color: #0a1f33" />
                        <Icon custom="iconfont icon-menu-fold" size="20" v-show="!this.shrink" style="color: #0a1f33" />
                    </div>
                    <div class="header-middle-content">
                        <!-- 顶部菜单 -->
                        <div v-if="navType == 1">
                            <navMenu :theme="navTheme" :currNav="currNav" :navList="navList" @on-click="selectNav" :sliceNum="sliceNum" :showIcon="showNavMenuIcon" />
                        </div>
                        <!-- 下拉菜单 -->
                        <div v-if="navType == 2">
                            <navApp
                                currType="tabs"
                                placement="bottom-start"
                                :currNavTitle="currNavTitle"
                                :currNav="currNav"
                                :navList="navList"
                                :type="navShowType"
                                :theme="navTheme"
                                @on-click="selectNav"
                            />
                        </div>
                        <!-- 面包导航 -->
                        <div class="main-breadcrumb" v-if="navType == 3">
                            <breadcrumb-nav :theme="navTheme" :currentPath="currentPath" />
                        </div>
                    </div>
                </div>
                <div class="header-center" v-if="message.includes('联络员')">
                    <p class="header-center-message">
                        <!-- <Alert type="warning" show-icon closable>
              请在
              "<span>系统管理</span>" - "<span>人员管理</span>" 中补充参会人员 <span style="color: #f00">身份证号</span>
            </Alert> -->
                    </p>
                </div>
                <!-- 顶部右侧按钮 -->
                <div class="header-right-content">
                    <search :theme="navTheme" :type="searchType" v-if="showSearch" />
                    <navApp :currNav="currNav" :navList="navList" :type="navShowType" @on-click="selectNav" v-if="navType == 3" />

                    <!--          <DatePicker class="data" type="year" placeholder="Select year" style="width: 200px">-->
                    <!--          </DatePicker>-->
                    <DatePicker class="data" :open="open" :value="dateValue" :clearable="false" type="year" @on-change="handleChange" ref="date">
                        <a href="javascript:void(0)" @click="handleClick">
                            <Icon type="ios-calendar-outline"></Icon>
                          <template v-if="this.formattedDateValue === ''">请选择</template>
                            <template v-else>{{ dateValue }}</template>
                        </a>
                    </DatePicker>
                    <!--          <Dropdown trigger="click" style="padding: 19px">-->
                    <!--            <a href="javascript:void(0)">-->
                    <!--              2024-->
                    <!--              <Icon type="ios-arrow-down"></Icon>-->
                    <!--            </a>-->
                    <!--            <DropdownMenu slot="list">-->
                    <!--              <DropdownItem>2024</DropdownItem>-->
                    <!--            </DropdownMenu>-->
                    <!--          </Dropdown>-->

                    <!--<full-screen v-model="isFullScreen" @on-change="fullscreenChange" />-->
                    <!--<language />
          <message-tip />-->
                    <user />
                    <!--<theme />-->
                    <div style="width: 30px"></div>
                </div>
            </div>
        </div>
        <!-- Tags 标签 -->
        <!--<div
            v-show="$store.state.user.isFullScreen"
      class="nav-tags"
      :style="{
        paddingLeft: shrink ? '60px' : menuWidth + 'px',
      }"
    >
      <tags-page-opened :pageTagsList="pageTagsList" v-if="showTags" />
    </div>-->
        <!-- 页面部分 -->
        <div class="single-page-content body_top "  :class="($store.state.user.isFullScreen ? (shrink ? 'body_top_min ' : 'body_top_man ') : 'w-100')+(!showHead ? 'body_top_man1' :'')" :key="reloadKey">
            <div class="single-page">
                <keep-alive :include="cachePage" >
                    <router-view />
                </keep-alive>
            </div>
            <!-- 页面页脚 -->
            <div class="main-page-footer-content" v-if="showFooter">
                <Footer class="main-page-footer" />
            </div>
        </div>
        <!-- 全局加载动画 -->
        <circleLoading class="loading-position" v-show="loading" />
    </div>
</template>

<script>
import shrinkableMenu from './main-components/shrinkable-menu/shrinkable-menu.vue';
import tagsPageOpened from './main-components/tags-page-opened.vue';
import breadcrumbNav from './main-components/breadcrumb-nav.vue';
import navMenu from './main-components/navMenu.vue';
import navApp from './main-components/navApp.vue';
import search from './main-components/search.vue';
import fullScreen from './main-components/fullscreen.vue';
import language from './main-components/language.vue';
import messageTip from './main-components/message-tip.vue';
import user from './main-components/user.vue';
import Footer from './main-components/footer.vue';
import theme from './main-components/theme.vue';
import circleLoading from '@/views/my-components/xboot/circle-loading.vue';

import util from '@/libs/util.js';
import { getStore, removeStore, setStore } from '@/libs/storage';

export default {
    components: {
        shrinkableMenu,
        tagsPageOpened,
        breadcrumbNav,
        navMenu,
        navApp,
        search,
        fullScreen,
        language,
        messageTip,
        user,
        Footer,
        theme,
        circleLoading
    },
    data() {
        return {
            showHead:true,
            reloadKey: 1,
            clearable: false,
            open: false,
            dateValue: '',
            navPaddingLeft: this.menuWidth,
            searchType: 'input',
            shrink: false,
            sliceNum: 3,
            currNav: '',
            isFullScreen: false,
            message: '请在“系统”-“人员管理”中补充参会人员身份证'
        };
    },
    computed: {
        // 主题
        mainTheme() {
            return this.$store.state.theme.theme.mainTheme;
        },
        menuTheme() {
            return this.$store.state.theme.theme.menuTheme;
        },
        navTheme() {
            return this.$store.state.theme.theme.navTheme;
        },
        menuWidth() {
            return this.$store.state.theme.theme.menuWidth;
        },
        fixNav() {
            return this.$store.state.theme.theme.fixNav;
        },
        navType() {
            return this.$store.state.theme.theme.navType;
        },
        showTags() {
            return this.$store.state.theme.theme.showTags;
        },
        showNavMenuIcon() {
            return this.$store.state.theme.theme.showNavMenuIcon;
        },
        navShowType() {
            return this.$store.state.theme.theme.navShowType;
        },
        showLogo() {
            return this.$store.state.theme.theme.showLogo;
        },
        showSearch() {
            return this.$store.state.theme.theme.showSearch;
        },
        showFooter() {
            return this.$store.state.theme.theme.showFooter;
        },
        weakMode() {
            return this.$store.state.theme.theme.weakMode;
        },
        // 应用
        loading() {
            return this.$store.state.app.loading;
        },
        navList() {
            return this.$store.state.app.navList;
        },
        currNavTitle() {
            return this.$store.state.app.currNavTitle;
        },
        menuList() {
            return this.$store.state.app.menuList;
        },
        pageTagsList() {
            return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
        },
        currentPath() {
            return this.$store.state.app.currentPath; // 当前面包屑数组
        },
        cachePage() {
            // console.log('#####cachePage',this.$store.state.app.cachePage)
            // return this.$store.state.app.cachePage;
            return [
                'jyqxManage',
                'jyqxInfoManage',
                'doneManage',
                'residentList',
                'accountReview',
                'archiveTransferInfo',
                'archiveTransferIVeDoneIt',
                'accountIVeDoneIt'
            ].join(',');
        },
        lang() {
            return this.$store.state.app.lang;
        }
    },
    methods: {
      computed: {
        formattedDateValue() {
          if (this.dateValue instanceof Date) {
            return this.dateValue.getFullYear(); // 或其他你需要的格式
          }
          return ''; // 或者'请选择'，如果dateValue未定义或不是日期
        },
      },
        async getGnSet() {
            let res = await this.postRequest('/qyManage/getGnSet');
            if (res.success && res.result) {
                this.residenceSwitch = res.result.residenceSwitch;
            }
        },
        init() {
            this.changeFixNav();
            // 菜单
            let pathArr = util.setCurrentPath(this, this.$route.name);
            this.showHead = this.$route.name !== "dataView";
            this.checkTag(this.$route.name);
            let currWidth = document.body.clientWidth;
            if (currWidth <= 1200) {
                this.sliceNum = 2;
            }
        },
        handleClick() {
            this.open = !this.open;
        },
        handleChange(date) {
            removeStore('tableName');
            this.setStore('distinction', date);
            this.dateValue = date;
            this.open = false;
            Cookies.set('tableName', date);
            setStore("tableName", date);
            this.reloadKey++;
            const sessionText = document.querySelector(".ivu-date-picker-header-label");
            sessionText.innerText = this.dateValue + '届';// TODO 设置届别
            console.log(sessionText.innerText,'设置届别');
        },
        // handleClear () {
        //   this.open = false;
        // },
        // handleOk () {
        //   this.open = false;
        // },
        getCurrNav() {
            // 读取选中顶部菜单名
            let currNav = this.getStore('currNav');
            if (currNav) {
                this.currNav = currNav;
            } else {
                // 默认第一个
                if (this.navList && this.navList.length > 0) {
                    this.currNav = this.navList[0].name;
                }
            }
        },
        selectNav(name) {
            let flag = false;
            this.navList.forEach(e => {
                if (e.name == name && e.isMenu == false) {
                    flag = true;
                    if (e.description == 'direct') {
                        window.location.href = e.url;
                    } else if (e.description == 'window') {
                        window.open(e.url);
                    } else if (e.description == 'route') {
                        this.$router.push({
                            name: e.url
                        });
                    }
                }
            });
            if (flag) {
                // 第三方站外链接 不作其他操作
                return;
            }
            // 缓存当前顶部菜单名
            this.currNav = name;
            this.setStore('currNav', name);
            this.$store.commit('setCurrNav', name);
            // 点击顶部菜单 回到首页
            if (this.$route.name != 'home_index') {
                this.$router.push({
                    name: 'home_index'
                });
            }
            util.initRouter(this);
        },
        toggleClick() {
            this.shrink = !this.shrink;
            this.changeFixNav();
        },
        changeFixNav() {
            if (this.fixNav) {
                this.navPaddingLeft = '0px';
            } else {
                this.navPaddingLeft = this.shrink ? '0px' : this.menuWidth + 'px';
            }
        },
        checkTag(name) {
            let openpageHasTag = this.pageTagsList.some(item => {
                if (item.name == name) {
                    return true;
                }
            });
            if (!openpageHasTag) {
                //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
                util.openNewPage(this, name, this.$route.params || {}, this.$route.query || {});
            }
        },
        handleSubmenuChange(val) {
            this.showHead = val !== "dataView";
        },
        beforePush(name) {
            // console.log(name)
            return true;
        },
        fullscreenChange(isFullScreen) {
            // console.log(isFullScreen);
        },
        resize() {
            let currWidth = document.body.clientWidth;
            if (currWidth <= 1200 && currWidth > 900) {
                this.sliceNum = 2;
                this.shrink = true;
            } else if (currWidth <= 900) {
                this.sliceNum = 1;
                this.shrink = true;
            } else {
                this.sliceNum = 3;
                this.shrink = false;
            }
            if (currWidth < 1325 && currWidth > 1200) {
                this.searchType = 'icon';
            } else if (currWidth < 1000 && currWidth > 900) {
                this.searchType = 'icon';
            } else if (currWidth < 835) {
                this.searchType = 'icon';
            } else {
                this.searchType = 'input';
            }
            this.changeFixNav();
        }
    },
    watch: {
        $route(to) {
            //获取功能设置
            this.getGnSet();
            this.$store.commit('setCurrentPageName', to.name);
            let pathArr = util.setCurrentPath(this, to.name);
            this.checkTag(to.name);
        },
        lang() {
            util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
        },
        fixNav() {
            this.changeFixNav();
        }
    },
    mounted() {
        this.dateValue = getStore('tableName');
        // if (this.dateValue == null || this.dateValue === '') {
        //     fetch('http://worldtimeapi.org/api/timezone/Etc/UTC')
        //         .then(response => response.json())
        //         .then(data => {
        //             const networkTime = data.utc_datetime;
        //             const regex = /-(.*?)-/;
        //             let month = networkTime.match(regex)[1];
        //             let year = networkTime.slice(0, 4);
        //             if (parseInt(month) >= 9) {
        //                 this.dateValue = parseInt(year) + 1 + '';
        //             } else {
        //                 this.dateValue = year + '';
        //             }
        //           this.setStore('distinction',this.dateValue);
        //         })
        //         .catch(error => console.error('获取网络时间时发生错误:', error));
        // }
        if (new Date().getMonth() + 1 > 8) {
            this.dateValue = (new Date().getFullYear() + 1).toString();
        } else {
          this.dateValue = new Date().getFullYear().toString();
        }
        const date = {
            thisYear: new Date().getFullYear(),
            thisMonth: new Date().getMonth(),
            today: new Date().getDate()
        };
        console.log(date,'date');
        this.setStore('distinction', this.dateValue);
        Cookies.set('tableName', this.dateValue);
        this.handleChange(this.dateValue);
    },
    created() {
        this.message = JSON.parse(sessionStorage.getItem('userInfo')).nickname;
        // 显示打开的页面的列表
        this.$store.commit('setOpenedList');
        this.init();
        setTimeout(() => {
            this.getCurrNav();
        }, 300);
        this.resize();
        window.addEventListener('resize', () => {
            this.resize();
        });
    },


};
</script>
